There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

Raised Button

The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

button settings_backup_restore button gps_fixed button 

  <a class="waves-effect waves-light  btn">button</a>
  <a class="waves-effect waves-light  btn"><i class="material-icons left">settings_backup_restore</i> button</a>
  <a class="waves-effect waves-light  btn"><i class="material-icons right">gps_fixed</i> button</a>

Flat Button


  <a class="waves-effect btn-flat">Button</a>

Submit Button

When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit


  <button class="btn waves-effect waves-light " type="submit" name="action">Submit</button>
  <button class="btn waves-effect waves-light " type="submit" name="action">Reply
    <i class="material-icons left">reply</i>
  </button>
  <button class="btn waves-effect waves-light " type="submit" name="action">Send
    <i class="material-icons right">send</i>
  </button>

Larger Button

This button has a larger height for buttons that need more attention.

Button desktop_mac button cast button 

  <a class="waves-effect waves-light btn-large">Button</a>
  <a class="waves-effect waves-light btn-large"><i class="material-icons left">cloud</i>button</a>
  <a class="waves-effect waves-light btn-large"><i class="material-icons right">cloud</i>button</a>

Small Button

When mouse and keyboard are the primary input methods, this smaller button is useful for denser UI layouts.

Button cloudbutton cloudbutton 

  <a class="waves-effect waves-light btn-small">Button</a>
  <a class="waves-effect waves-light btn-small"><i class="material-icons left">cloud</i>button</a>
  <a class="waves-effect waves-light btn-small"><i class="material-icons right">cloud</i>button</a>

Disabled Button

This style can be applied to all button types.

Button Button Button add 

  <a class="btn-large disabled">Button</a>
  <a class="btn disabled">Button</a>
  <a class="btn-flat disabled">Button</a>
  <a class="btn-floating disabled"><i class="material-icons">add</i></a>
add
settings
close
Theme Customizer

Customize & Preview in Real Time

Menu Options

Menu Color

Menu Background Color

Menu Dark
Menu Collapsed

Menu Selection

Navbar Options

Navbar Color

Navbar Dark
Navbar Fixed
Footer Options
Footer Dark
Footer Fixed
add_shopping_cart